<template>
	<view class="container">
		<view class="flex justify-between bg-white align-center border-radius-10 mt-20" style="padding: 10upx 30upx">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">头像</text>
			</view>
			<view class="flex justify-between align-center">
				<view class="avatar">
					<image style="width: 100%; height: 100%" @tap="buttonclick" :src="userInfo.avatarImage" size="" />
					<!-- <view style="width: 100%;height: 100%;"></view> -->
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
		</view>

		<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="openNickName">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">昵称</text>
			</view>
			<view class="flex justify-between align-center">
				<view>{{ userInfo.nickName }}</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
		</view>

		<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">会员卡号</text>
			</view>
			<view class="flex justify-between align-center">
				<view>{{ userInfo.id }}</view>
			</view>
		</view>

		<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">手机号码</text>
			</view>
			<view class="flex justify-between align-center">
				<view>{{ userInfo.mobile }}</view>
			</view>
		</view>

		<!-- 修改昵称的弹框 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="pop-content">
				<view style="display: flex; align-items: center; height: 100rpx">
					昵称：
					<input
						v-model="newNickName"
						class="uni-input"
						focus
						placeholder="请输入要修改的昵称"
						:maxlength="50"
						style="border: 1px solid #979797; height: 60rpx; padding-left: 10rpx; border-radius: 10rpx"
					/>
				</view>
				<view class="submit-btn">
					<button type="primary" size="mini" @click="editNickName" style="maigin-top: 50rpx">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { uploadFile } from '@/utils/upload.js';
export default {
	data() {
		return {
			newNickName: '',
			userInfo: {},
			tempFilePaths: '',
			sourceType: ['camera', 'album']
		};
	},
	onLoad() {
		this.getMemberInfos();
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	computed: {
		...mapState(['userBalance'])
	},
	methods: {
		// 获取个人信息
		async getMemberInfos() {
			const _that = this;
			const res = await _that.$api.getMemberInfo();
			_that.userInfo = res.data;
			_that.userInfo.avatarImage = _that.userBalance.avatarImage;
			this.newNickName = this.userInfo.nickName;
		},
		// 选择上传方式
		buttonclick() {
			//头像点击处理事件，使用uni.showActionSheet()调用菜单栏
			const that = this;
			uni.showActionSheet({
				itemList: ['拍照', '相册'],
				itemColor: '',
				//成功时回调
				success: function (res) {
					if (!res.cancel) {
						/*
				           res.tapIndex返回用户点击的按钮序号，从上到下的顺序，从0开始
				           比如用户点击本例中的拍照就返回0，相册就返回1
				           我们res.tapIndex的值传给chooseImage()
				          */
						that.chooseImage(res.tapIndex); // 调用封装的unichooseImage方法
					}
				},
				//失败时回调
				fail: function (res) {
					console.log('调用失败');
				},
				complete: function (res) {}
			});
		},
		chooseImage(tapIndex) {
			const checkeddata = true;
			const that = this;
			uni.chooseImage({
				//count表示一次可以选择多少照片
				count: 1,
				//如果sourceType为camera则调用摄像头，为album时调用相册
				sourceType: [that.sourceType[tapIndex]],
				async success(res) {
					const result = await uploadFile('/api/Tools/UploadFiles', res.tempFilePaths[0]);
					await that.$api.upLoadAvatar({ id: result.data.fileUrl });
					uni.showToast({
						title: '设置成功',
						icon: 'success',
						duration: 2000
					});
					that.userInfo.avatarImage = res.tempFilePaths[0];
				},
				fail: (err) => {
					console.log('err: ', err);
					// #ifdef APP-PLUS
					if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
						this.checkPermission(err.code);
					}
					// #endif
					// #ifdef MP
					if (err.errMsg.indexOf('cancel') !== '-1') {
						return;
					}
					uni.getSetting({
						success: (res) => {
							let authStatus = false;
							switch (this.sourceTypeIndex) {
								case 0:
									authStatus = res.authSetting['scope.camera'];
									break;
								case 1:
									authStatus = res.authSetting['scope.album'];
									break;
								case 2:
									authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
									break;
								default:
									break;
							}
							if (!authStatus) {
								uni.showModal({
									title: '授权失败',
									content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting();
										}
									}
								});
							}
						}
					});
					// #endif
				}
			});
		},
		// 编辑昵称
		openNickName() {
			this.$refs.popup.open('bottom');
		},
		async editNickName() {
			if (!this.newNickName)
				return uni.showToast({
					title: '输入不能为空',
					icon: 'error'
				});
			if (this.newNickName.length > 10)
				return uni.showToast({
					title: '输入不能超过10个字符',
					icon: 'error'
				});
			await this.$api.editNickName({ id: this.newNickName });
			uni.showToast({
				title: '修改成功'
			});
			this.userInfo.nickName = this.newNickName;
			this.$refs.popup.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.avatar {
	width: 80rpx;
	height: 80rpx;
	background-color: #f1ba48;
	border-radius: 50%;
	overflow: hidden;
}
.nick-name {
	height: 200rpx;
	background-color: #fff;
}

// 修改昵称内容
.pop-content {
	position: fixed;
	height: 300rpx;
	background-color: #fff;
	width: 100%;
	bottom: 0;
	left: 0;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
}
</style>
